﻿@model MusicOnLine.Models.AlbumUploadModel
<style type="text/css">
    .divTitle
    {
        float:left;
        line-height:20px;
        width:100px;
        text-align:right;
    }
    .divContent
    {
        float:left;
        line-height:20px;
        width:150px;
    }
        .divContent input[type=text]
        {
            height:15px;
            border:none;
            border-bottom:solid 1px #669900;
        }
        .divContent select
        {
            
            border:none;
            border-bottom:solid 1px #669900;
            width:150px;        
            outline:none;    
        }
           input{ vertical-align:middle; margin:0; padding:0}
    .file-box{ position:relative;width:380px; height:15px;}
    .txt{ height:18px; border:1px solid #ABADB3; width:180px;}
    .btn{ background-color:#FFF; border:1px solid #ABADB3;height:20px; width:70px;}
    .file{ position:absolute; top:0; right:155px; height:24px; filter:alpha(opacity:0);opacity: 0;width:70px }
    .divLable
    {
         line-height:18px; width:60px;background-color:#669900; color:#fff; text-align:center;
    }
    .divbutton
    {
        line-height:18px; width:60px;background-color:#ABADB3; color:#fff; text-align:center; cursor:pointer;
    }
        .divbutton:hover
        {
           background-color:#669900; 
        }
    .divAlbumSingleSong
    {
        height:20px;
        margin-top:10px;
        clear:both;        
    }
    .divLine
    {
        clear:both;
    }
    .colorred
    {
       color:red;
    }
    .div_overlay
    {      
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1010;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }
    .divAlertProccess
    {
        position:fixed; 
        top:50%;
        left:50%; 
        margin-left:-200px; 
        margin-top:-75px; 
        z-index:9999;
        width:400px;
         height:150px;
          background-color:#669900; 
          color:#fff; 
          text-align:center;
          line-height:150px; 
           -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
    }
</style>
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>  
    <script src="@Url.Content("~/Scripts/Common/fileformat.validate.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery.form.js"></script>
<script type="text/javascript">
    function onBeginUpload() {
        $("#divModel").addClass("div_overlay");
        $("#divModel").show();
        $("#divUpdateTarget").addClass("divAlertProccess");
        $("#divUpdateTarget").show();
    }
</script>
<div>
<fieldset style="">
<legend>上传专辑</legend>
    @using (Html.BeginForm("UploadAlbum", "ManageAlbum",FormMethod .Post,new { enctype = "multipart/form-data" }))     
    {
         @Html.ValidationSummary(true)
<div class="divLable" style="margin-top:10px;">专辑信息</div>
 <hr />
   
<div id="divAlbumInfo" style="height:20px;">
  <div class="divLine">
        <div class="divTitle">专辑名:</div>
        <div class="divContent">
            @Html.EditorFor(model => model.AlbumName)           
        </div>
       @Html.ValidationMessageFor(model => model.AlbumName)
 </div>
    <div class="divLine">
        <div class="divTitle">专辑艺术家:</div>
        <div class="divContent">
            @Html.EditorFor(model => model.AlbumArtist)          
        </div>
          @Html.ValidationMessageFor(model => model.AlbumArtist)
        </div>
     <div class="divLine">
        <div class="divTitle">风格:</div>
        <div class="divContent">
             @Html.DropDownList("Genre",ViewBag.GenreList as SelectList)         
        </div>
          @Html.ValidationMessageFor(model => model.Genre)
        </div>    
<div class="divLine">
    <div class="divTitle">年份:</div>
    <div class="divContent">
        @Html.EditorFor(model => model.Year)      
    </div>  
      @Html.ValidationMessageFor(model => model.Year) 
</div>
</div>
   <div  class="divLine">
    <div class="divTitle">专辑封面:</div>
    <div class="divContent">             
          <div class="file-box">
              @Html.EditorFor(model => model.AlbumTitle)              
             <input type='button' class='btn' value='浏览...' />
             <input type="file" name="fileImgUrl" class="file" id="fileImgUrl"  onchange="document.getElementById('AlbumTitle').value=this.value" />             
                @Html.Hidden("TitleFile", "fileImgUrl")       
              @Html.ValidationMessageFor(model => model.AlbumTitle)       
            </div>
        
     </div>
    </div>
    <br />
 <div style="clear:both;margin-top:20px;">
    <div class="divLable" style="float:left;">专辑曲目</div>             
</div>
  <div style="clear:both;"></div>
 <hr />
    <div class="divAlbumSongs">
          <div class="divAlbumSingleSong">
            <div style="float:left; width:20px;line-height:20px;">1.</div>
            <div class="divTitle" style="width:50px;">歌曲名:</div>
            <div class="divContent"><input type="text" class="requiredInput" name="SongList[0].Name"  /></div>              
            <div class="divTitle">歌曲艺术家:</div>
            <div class="divContent"><input type="text" class="requiredInput" name="SongList[0].Artist"  /></div>
             <div class="divTitle">歌曲文件:</div>
              <div class="divContent">             
                  <div class="file-box">
                     <input type="text" class="requiredInput filetext" readonly="true"  name="filesong0" id="filesong0" />       
                     <input type='button' class='btn' value='浏览...' />
                     <input type="file" name="file0" class="file"   onchange="document.getElementById('filesong0').value=this.value;$('#filesong0').removeClass('colorred')" />             
                    <input type="hidden" name="SongList[0].Location" value="file0" />
                  </div>
             </div>
         </div>
    </div>
        <div style="width:100%; text-align:center; margin-top:20px; "><input type="button" class="divbutton" value="添加曲目" id="divAddAlbumSong" />&nbsp<input class="divbutton" id="btnSubmit"  type="submit" value="提交" /></div>
    }
</fieldset>
    
     
</div>
<div id="divModel" style="display:none;"></div>
<div id="divUpdateTarget" style="display:none;">正在上传......</div>
<script type="text/javascript">
    $(document).ready(function () {
        var index = 2;
        $("#divAddAlbumSong").click(function () {
            $(".divAlbumSingleSong").last().children(".divbutton").remove();
            $(".divAlbumSongs").append('  <div class="divAlbumSingleSong">'
                + '<div style="float:left; width:20px;line-height:20px;">'+index+'.</div>'
            + '<div class="divTitle" style="width:50px;">歌曲名:</div>'
            + '<div class="divContent"><input type="text" class="requiredInput" name="SongList[' + (index - 1) + '].Name" /></div>'
            + '<div class="divTitle">歌曲艺术家:</div>'
            + '<div class="divContent"><input type="text" class="requiredInput" name="SongList[' + (index - 1) + '].Artist" /></div>'
             + '<div class="divTitle">歌曲文件:</div>'
              + '<div class="divContent">'
                 + ' <div class="file-box">'
                    + ' <input type="text" class="requiredInput filetext"  readonly="true"  name="filesong' + (index - 1) + '" id="filesong' + (index - 1) + '"  style=""/>  '
                     + '<input type="button" class="btn" value="浏览..." />'
            + '<input type="file" name="file' + (index - 1) + '" class="file"  onchange="document.getElementById(\'filesong' + (index - 1) + '\').value=this.value;$(\'#filesong' + (index - 1) + '\').removeClass(\'colorred\')" />'
            + ' <input type="hidden" name="SongList[' + (index - 1) + '].Location" value="file' + (index - 1) + '" />'
                   + '</div>'
             + '</div>'
         + '</div>');
            index++;
            $(".divAlbumSingleSong").last().append("<div class='divbutton' style='float:right;'>移除</div>")
        });
        $(".divAlbumSingleSong .divbutton").live("click", function () {
            $(this).parents(".divAlbumSingleSong").remove();
            if ($(".divAlbumSingleSong").length > 1) {
                $(".divAlbumSingleSong").last().append("<div class='divbutton' style='float:right;'>移除</div>");
            }
            index--;
        })
        $("#btnSubmit").click(function () {
            if (!validateSong()) {
                return false;
            }
        });
        
        function validateSong()
        {
            var isValid=true;
            $(".requiredInput").each(function (index) {
                var value = $.trim($(this).val());
                if (value == "" || value == "不能为空") {
                    $(this).addClass("colorred");
                    $(this).val("不能为空");
                    isValid = false;
                }
                else {
                    if ($(this).hasClass("filetext"))
                    {
                        var arr = value.split('.');
                        var filef = arr[arr.length - 1];
                        if ("m4a,mp3,wma".indexOf(filef) < 0) {
                            $(this).addClass("colorred");
                            $(this).val("文件格式不正确");
                            isValid = false;
                        }
                    }
                }

            });
            return isValid;
        }
        $(".requiredInput").live("focus",function () {            
            var value = $.trim($(this).val());
            if (value == "不能为空")
            {
                $(this).removeClass("colorred");
                $(this).val("");
              
            }
        })
      
    })
    function UploadSuccess()
    {

    }
</script>














